"Testimonial 4"
Bootstrap 4.1.1 Snippet by Pawan Pandey

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" media="all"> <div id="testimonial4" class="carousel slide testimonial4_indicators testimonial4_control_button thumb_scroll_x swipe_x" data-ride="carousel" data-pause="hover" data-interval="5000" data-duration="2000"> <div class="testimonial4_header"> <h4>what our clients are saying</h4> </div> <ol class="carousel-indicators"> <li data-target="#testimonial4" data-slide-to="0" class="active"></li> <li data-target="#testimonial4" data-slide-to="1"></li> <li data-target="#testimonial4" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <div class="testimonial4_slide"> <img src="http://via.placeholder.com/100x100" class="img-circle img-responsive" /> <p>Lorem ipsum dolor sit amet adipiscing elit am nibh unc varius facilisis eros ed erat in in velit quis arcu ornare laoreet urabitur.</p> <h4>Ben Hanna</h4> </div> </div> <div class="item"> <div class="testimonial4_slide"> <img src="http://via.placeholder.com/100x100" class="img-circle img-responsive" /> <p>Lorem ipsum dolor sit amet adipiscing elit am nibh unc varius facilisis eros ed erat in in velit quis arcu ornare laoreet urabitur.</p> <h4>Ben Hanna</h4> </div> </div> <div class="item"> <div class="testimonial4_slide"> <img src="http://via.placeholder.com/100x100" class="img-circle img-responsive" /> <p>Lorem ipsum dolor sit amet adipiscing elit am nibh unc varius facilisis eros ed erat in in velit quis arcu ornare laoreet urabitur.</p> <h4>Ben Hanna</h4> </div> </div> </div> <a class="left carousel-control" href="#testimonial4" role="button" data-slide="prev"> <span class="fa fa-chevron-left"></span> </a> <a class="right carousel-control" href="#testimonial4" role="button" data-slide="next"> <span class="fa fa-chevron-right"></span> </a> </div>
#testimonial4{ overflow: hidden; min-height: 375px; position: relative; background: #1583c9; } #testimonial4 .carousel-inner{ width: 75%; margin: auto; } #testimonial4 .carousel-inner:hover{ cursor: -moz-grab; cursor: -webkit-grab; } #testimonial4 .carousel-inner:active{ cursor: -moz-grabbing; cursor: -webkit-grabbing; } #testimonial4 .carousel-inner .item{ overflow: hidden; } .testimonial4_indicators .carousel-indicators{ left: 0; margin: 0; width: 100%; font-size: 0; height: 20px; bottom: 15px; padding: 0 5px; cursor: e-resize; overflow-x: auto; overflow-y: hidden; position: absolute; text-align: center; white-space: nowrap; } .testimonial4_indicators .carousel-indicators li{ padding: 0; width: 10px; height: 10px; border: none; text-indent: 0; margin: 2px 3px; cursor: pointer; display: inline-block; background: #ffffff; -webkit-border-radius: 100%; border-radius: 100%; } .testimonial4_indicators .carousel-indicators .active{ padding: 0; width: 10px; height: 10px; border: none; margin: 2px 3px; background-color: #000; -webkit-border-radius: 100%; border-radius: 100%; } .testimonial4_indicators .carousel-indicators::-webkit-scrollbar{ height: 3px; } .testimonial4_indicators .carousel-indicators::-webkit-scrollbar-thumb{ background: #eeeeee; -webkit-border-radius: 0; border-radius: 0; } .testimonial4_control_button .carousel-control{ top: 175px; opacity: 1; width: 40px; bottom: auto; height: 40px; font-size: 10px; cursor: pointer; font-weight: 700; overflow: hidden; line-height: 38px; text-shadow: none; text-align: center; position: absolute; background: transparent; border: 2px solid #ffffff; text-transform: uppercase; -webkit-border-radius: 100%; border-radius: 100%; -webkit-box-shadow: none; box-shadow: none; -webkit-transition: all 0.6s cubic-bezier(0.3,1,0,1); transition: all 0.6s cubic-bezier(0.3,1,0,1); } .testimonial4_control_button .carousel-control.left{ left: 7%; right: auto; } .testimonial4_control_button .carousel-control.right{ right: 7%; left: auto; } .testimonial4_control_button .carousel-control.left:hover, .testimonial4_control_button .carousel-control.right:hover{ color: #000; background: #fff; border: 2px solid #fff; } .testimonial4_header{ top: 0; left: 0; bottom: 0; width: 550px; display: block; margin: 30px auto; text-align: center; position: relative; } .testimonial4_header h4{ color: #ffffff; font-size: 30px; font-weight: 600; position: relative; letter-spacing: 1px; text-transform: uppercase; } .testimonial4_slide{ top: 0; left: 0; right: 0; bottom: 0; width: 70%; margin: auto; padding: 20px; position: relative; text-align: center; } .testimonial4_slide img { top: 0; left: 0; right: 0; width: 50px; height: 50px; margin: auto; display: block; color: #f2f2f2; font-size: 18px; line-height: 46px; text-align: center; position: relative; } .testimonial4_slide p { color: #ffffff; font-size: 16px; margin: 40px 0 20px 0; } .testimonial4_slide h4 { color: #ffffff; font-size: 24px; font-weight: bold; } @media only screen and (max-width: 480px){ .testimonial4_control_button .carousel-control{ display: none; } .testimonial4_header{ width: 95%; } .testimonial4_header h4{ font-size: 20px; } .testimonial4_slide{ width: 98%; padding: 5px; } } @media (min-width: 481px) and (max-width: 767px){ .testimonial4_control_button .carousel-control.left{ left: 2%; } .testimonial4_control_button .carousel-control.right{ right: 2%; } .testimonial4_header{ width: 95%; } .testimonial4_slide{ width: 98%; padding: 5px; } } @media (min-width: 768px) and (max-width: 991px){ .testimonial4_control_button .carousel-control.left{ left: 5%; } .testimonial4_control_button .carousel-control.right{ right: 5%; } } @-webkit-keyframes psBoxShadowEffect_2{ 0% { opacity: 0.3; } 40% { opacity: 0.5; -webkit-box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #ffffff, 0 0 0 10px rgba(255,255,255,0.5); } 100% { -webkit-box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 5px 5px #ffffff, 0 0 0 5px rgba(255,255,255,0.5); -webkit-transform: scale(1.5); opacity: 0; } } @keyframes psBoxShadowEffect_2{ 0% { opacity: 0.3; } 40% { opacity: 0.5; box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #ffffff, 0 0 0 10px rgba(255,255,255,0.5); } 100% { box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 5px 5px #ffffff, 0 0 0 5px rgba(255,255,255,0.5); transform: scale(1.5); opacity: 0; } }

Related: See More


Questions / Comments:

not working slider

prasanta9040 () - 5 years ago - Reply 0